export default class Control {
    constructor(body) {
        this.dataArr = [];

        this.index = 0;
        this.elementArr = new Map();

        this._init();
    }

    _init() {
        let newElement = document.createElement('div');
        newElement.setAttribute('style', 'position: absolute;top: 0px;right: 0px;');
        document.body.appendChild(newElement);

        this.root = newElement;
    }

    add(data) {
        this._create(data);
        return this;
    }

    _create(cur) {
        const { name, max, min, value, step, action } = cur;
        let div = document.createElement('div');
        div.setAttribute('style', 'height: 30px;');

        let span1 = document.createElement('span');
        span1.innerText = name + ':';
        span1.setAttribute('style', 'width:70px;font-size: 15px;float: left;height: 20px; line-height: 20px;padding: 5px; font-weight: 700;color: rgb(255, 255, 255);');

        let span2 = document.createElement('span');
        span2.innerText = value;
        span2.setAttribute('style', 'width:30px;font-size: 15px;float: left;height: 20px; line-height: 20px;padding: 5px; font-weight: 700;color: rgb(255, 255, 255);');

        let index = document.createElement('input');
        index.setAttribute('type', 'range');
        index.setAttribute('style', 'float: left;height: 30px;margin-right: 10px;');
        index.max = max;
        index.min = min;
        index.step = step;
        index.value = value;

        div.appendChild(span1);
        div.appendChild(span2);
        div.appendChild(index);

        this.root.appendChild(div);

        index.addEventListener('input', function (event) {
            span2.innerText = index.value;
            action(index.value);
        })
    }
}